<template>
	<view class="lay">
		<msgNavbar ></msgNavbar>
		<view class="search">
			<uni-search-bar cancelButton="none" v-model="keywords" placeholder="搜索"></uni-search-bar>
		</view>

		<view class="msg-list" >
			<view class="approval-request" v-if="isFlag" @click="approvalNavTo('/pages/workbench/myApproval')">
				<view class="avatar-icon">
					<u-icon name="order" size="35" color="#26A0FB"></u-icon>
				</view>
				<view class="approval-body">
					<view class="approval-lable">
						<text>新的审批</text>
						<text style="margin-left: 68%;font-size: 10px; color: #888;" >22:10</text>
					</view>
					<view class="approval-content">
						<text>{{approvalUserName}}的请假申请需要你来处理</text>
						<u-badge type="error" max="99" :value="approvalNumber" color="white" ></u-badge>
					</view>
				</view>
				
			</view>
			<view class="friend-request" v-if="isShow" @click="requestNavTo('/pages/book/addNewFriend/addNewFriend')">
				<view class="avatar-icon">
					<uni-icons size="35" type="personadd-filled" color="#26A0FB"></uni-icons>
				</view>
				<view class="request-body">
					<view class="label">
						<text>新的好友</text>
						<text style="margin-left: 68%; font-size: 10px; color:#888 ;">16:11</text>
					</view>
					<view class="request-user">
						<text>{{friendName}}请求添加你为好友</text>
						<u-badge type="error" max="99" :value="value" color="white"></u-badge>
					</view>
				</view>
			</view>
			<view class="user" v-for="item in UserList" :key="item.id"  @click="navTo('/pages/chat/chat',item)">
					<u-avatar
					size="45"
					:text="getAvatar(item)"
					shape="square" 
					bg-color="#0080FF"
					font-size='15'
					:src="item.avaUrl"
					>
					</u-avatar>
					
					<view class="user-name">
						{{item.userName}}
						<view class="msg-dateTime">
								{{item.sendTime}}
						</view>	
					</view>
					<view class="user-msg">
						{{item.content}}
						<uni-badge style="float: right;" :text="item.badgeNumber" size="small" />
					</view>
			</view>
		</view>
		
		</scroll-view>
	</view>
	
	
</template>

<script>
import { methods } from '../../uni_modules/uview-ui/libs/mixin/mixin'
	export default{
		
		data(){
			return{
				isFlag:false,
				isShow:false,
				value:0,
				approvalNumber:0,
				keywords: '',
				requestList:[],
				user:{},
				UserList:[],
				token:'',
				friendName:'',
				approvalList:[],
				approvalUserName:'',
				messages:{
					fromUserID:null,
					toUserID:null,
					content:null,
				},
				socketTask:null,
				count:0
			}
		},
		components:{
		},
		methods:{
			approvalNavTo(url){
				uni.navigateTo({
					url:url
				})
			},
			getAvatar(user){
				let text = '';
				if(user.userName === null){
					user.userName = "";
				}
				if(user.avaUrl == null|| user.avaUrl.length == 0){
					text = user.userName.slice(-2);
				}else{
					text = null;
				}
				return text;
			},
			initData(){
				// 获取好友请求
				uni.request({
					url:"http://localhost:8090/nailCampus/friend/getAllAddMessage",
					header:{
						'token':this.token
					},
					success:res=> {
						this.requestList = res.data.data;
						if(res.data.data.length != 0){
							this.isShow = true;
							this.value = this.requestList.length;
							this.friendName = this.requestList[this.value-1].userName;
						}
					}
				});
				// 获取审批信息
				uni.request({
					url:"http://localhost:8090/nailCampus/approval/getUnProcessApproval",
					header:{
						'token':this.token
					},
					success:res=> {
						this.approvalList = res.data.data;
						console.log(res.data)
						if(res.data.data != null&&res.data.data.length!=0){
							this.isFlag = true;	
							this.approvalNumber = res.data.data.length;
							this.count = this.count+this.approvalNumber
							this.approvalUserName = this.approvalList[this.approvalNumber-1].userName;
						}
					}
				});
				// 获取未读消息
				uni.request({
					url:"http://localhost:8090/nailCampus/message/getUnreadMessages",
					header:{
						'token':uni.getStorageSync('token')
					},
					success:res=> {
						this.UserList = res.data.data;
						for(let i = 0;i<this.UserList.length;i++){
							this.count=this.count+this.UserList[i].badgeNumber
						}
						if(this.count!=0){
							uni.setTabBarBadge({
							  index: 0,
							  text: this.count.toString()
							})
						}else{
							uni.removeTabBarBadge({
								index:0
							})
						}
					}
				});	
			},
			requestNavTo(url,id){
				uni.navigateTo({
					url:url+'?id='+id
				})
			},
			navTo(url,item){
				let id = item.fromUserId ; 
				if(item.fromUserId === this.user.id){ 
					id = item.toUserId 
				}
				uni.navigateTo({
					url:url+'?id='+id
				})
			},
			// 打开websocket
			onSocket() {
				let _this = this;
				if(this.socketTask !=null ){
					this.socketTask.close()
					console.log("关闭成功")
					this.socketTask.onClose(res=>{
						// console.log("当前状态为:",res.code)
					})
				}
				this.socketTask = uni.connectSocket({
					  url: 'ws://localhost:8090/websocket/'+this.user.id,
					  success() {
					  	console.log("连接成功");
					  }
				});
				console.log(this.socketTask);
				this.socketTask.onOpen((res)=>{
					// console.log("监听事件已经打开",res)
				});
				this.socketTask.onMessage((res)=>{
					let list = res.data.split(":");
					_this.messages.fromUserID = Number(list[0]);
					_this.messages.toUserID = _this.user.id;
					_this.messages.content = list[1];
					for(let i = 0 ; i<this.UserList.length;i++){
						if(this.UserList[i].fromUserId ===  Number(list[0])){
							this.UserList[i].badgeNumber++
							const currentTime = new Date()
							const Month = currentTime.getMonth()+1<10?'0'+(currentTime.getMonth()+1):currentTime.getMonth()+1
							const day = currentTime.getDate()<10?'0'+currentTime.getDate():currentTime.getDate()
							const Hours = currentTime.getHours()<10?'0'+currentTime.getHours():currentTime.getHours()
							const Minute = currentTime.getMinutes()<10?('0'+currentTime.getMinutes()):currentTime.getMinutes()
							const Second = currentTime.getSeconds()<10?('0'+currentTime.getSeconds()):currentTime.getSeconds()
							this.UserList[i].sendTime = currentTime.getFullYear()+'-'+Month+'-'+day+' '+Hours+':'+Minute+':'+Second
							this.UserList[i].content = list[1]
						}
						// console.log("相加之前的数量为",this.count)
						this.count = this.UserList[i].badgeNumber
						// console.log("当前的数量为:",this.count)
						
					}
					uni.setTabBarBadge({
					  index: 0,
					  text: this.count.toString()
					})
					// console.log("收到的消息",res.data);
					uni.$emit('message',{message:_this.messages});
				})
			},
		},
		onLoad() {
			this.user = uni.getStorageSync("user")
			this.token = uni.getStorageSync("token")
			this.initData();
			this.onSocket();
		},
		onUnload() {
		}
	}
</script>

<style scoped lang="less">
	.lay{
		margin-left: 20rpx;
		margin-right: 20rpx;
		margin-top: 30rpx;
		.search{
			width: 100%;
			float: left;
			margin-top: 70rpx;
		}
		
		.msg-list{
			margin-top: 160rpx;
			.approval-request{
				display: flex;
				height: 80rpx;
				margin-left: 3%;
				width: 100%;
				.avatar-icon{
					padding-top: 1%;
					padding-left: 1.5%;
					width: 11%;
					background-color: #CCEDFE;
					border-radius: 10rpx;
				}
				.approval-body{
					width: 90%;
					margin-left: 4%;
					.label{
						width: 100%;
						text{
							font-size: 30rpx;
							font-weight: 550;
						}
					}
					.approval-content{
						display: flex;
						width: 100%;
						text{
							width: 90%;
							color: #888;
							font-size: 25rpx;
						}
						::v-deep.u-badge{
							width: 2.5%;
						}
					}
				}
			}
			.friend-request{
				margin-left: 3%;
				height: 80rpx;
				width: 100%;
				display: flex;
				.avatar-icon{
					padding-top: 1%;
					padding-left: 1.5%;
					width: 11%;
					background-color: #CCEDFE;
					border-radius: 10rpx;
				}
				.request-body{
					width: 90%;
					margin-left: 4%;
					.label{
						width: 100%;
						text{
							font-size: 30rpx;
							font-weight: 550;
						}
					}
					.request-user{
						display: flex;
						width: 100%;
						text{
							color: #888;
							font-size: 25rpx;	
						}
						::v-deep.u-badge{
							margin-left: 45%;
						}
					}
				}
			}
			
			.user{
				margin-top: 30rpx;
				margin-left: 20rpx;
				::v-deep.u-avatar{
					float: left;
				}
				.user-name{
					font-size: 30rpx;
					font-weight: 550;
					margin-left: 120rpx;
					.msg-dateTime{
						font-size: 20rpx;
						color: #888;
						float: right;
					}
				}
				.user-msg{
					color: #888;
					font-size: 25rpx;
					margin-top: 10rpx;
					margin-left: 120rpx;
				}
			}
		}
	}


</style>